<template>
  <div class="proDetail" v-loading="loading">
    <div class="options pa-flex">
      <div class="option-item" @click="toConfig()">
        <span class="text">项目流程配置</span
        ><i class="el-icon-arrow-right"></i>
      </div>
      <div class="option-item" @click="consult">
        <span class="text">会商会审</span><i class="el-icon-arrow-right"></i>
      </div>
      <div class="option-item" @click="pushVisible = true">
        <span class="text">数据礼包</span><i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <dataPush :pushVisible.sync="pushVisible" :proId="proId" />
    <div class="bodyPart pa-flex">
      <div class="proIntro">
        <div class="title">项目赋码</div>
        <div class="content">{{ proDetail.projectCode }}</div>
        <div class="title">项目类型</div>
        <div class="content">{{ proDetail.projectTypeName }}</div>
        <div class="title">总投资</div>
        <div class="content">{{ proDetail.totalAmount }}万元</div>
        <div class="title">项目性质</div>
        <div class="content">{{ proDetail.projectNatureName }}</div>
        <div class="title">项目起止年限</div>
        <div class="content">
          {{
            proDetail.startTime &&
              proDetail.startTime.split(" ")[0].split("-")[0]
          }}~{{
            proDetail.buildingTime &&
              proDetail.buildingTime.split(" ")[0].split("-")[0]
          }}
        </div>
        <div class="title">联系人</div>
        <div class="content">{{ proDetail.handleLeader }}</div>
        <div class="title">联系方式</div>
        <div class="content">{{ proDetail.handlePhone }}</div>
        <div class="title">建设内容和规模</div>
        <div class="content">{{ proDetail.constructContent }}</div>
        <div class="title">实施单位</div>
        <div class="content">{{ proDetail.projectUnit }}</div>
        <div class="title">责任单位</div>
        <div class="content">{{ proDetail.projectUnit }}</div>
        <div class="title">行政管理单位</div>
        <div class="content">{{ proDetail.projectUnit }}</div>
        <div class="moreContent" @click="seeMore">
          <span>查看更多</span><i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="rightPart">
        <div class="tab pa-flex-center">
          <div
            :class="currentIndex == index ? 'checked' : ''"
            v-for="(item, index) in tabs"
            :key="index"
            @click="handleTab(index)"
          >
            {{ item }}
          </div>
        </div>
        <!-- 项目进度 -->
        <div
          class="process pa-flex pa-relative f-c"
          v-show="contentVisible == 0"
        >
          <ProjectCanvas />
        </div>
        <!-- 用户问题 -->
        <div class="userQues" v-show="contentVisible == 1">
          <div class="service">待服务问题</div>
          <div
            class="pa-mb-2"
            v-for="(item, index) in problemList"
            :key="index + item.id"
          >
            <div v-if="item.status == 2">
              <userProblem :problemDetail="item" />
            </div>
          </div>
          <div class="finish">已完成问题</div>
          <div
            class="pa-mb-2"
            v-for="(item, index) in problemList"
            :key="index"
          >
            <div v-if="item.status == 1">
              <userProblem :problemDetail="item" />
            </div>
          </div>
        </div>
        <div class="userQues" v-show="contentVisible == 2">
          <el-table :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="80px"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              label="项目名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="userName"
              label="用户姓名"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="contactInformation"
              label="联系方式"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="content"
              label="用户咨询描述"
              align="center"
            ></el-table-column>
            <el-table-column prop="date" label="操作" align="center">
              <div slot-scope="scoped">
                <span class="show" @click="handleShow(scoped.row)">查看</span>
              </div>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="666px"
      :before-close="handleClose"
    >
      <div class="dialogContent">
        <table>
          <tr>
            <td class="_label">时间</td>
            <td class="_value" colspan="4">{{ dialogData.createTime }}</td>
          </tr>
          <tr>
            <td class="_label">项目名称</td>
            <td class="_value" colspan="4">{{ dialogData.projectName }}</td>
          </tr>
          <tr>
            <td class="_label">联系人</td>
            <td class="_value" colspan="4">{{ dialogData.userName }}</td>
          </tr>
          <tr>
            <td class="_label">联系方式</td>
            <td class="_value" colspan="4">
              {{ dialogData.contactInformation }}
            </td>
          </tr>
          <tr>
            <td class="_label">用户咨询描述</td>
            <td class="_value" colspan="4">{{ dialogData.content }}</td>
          </tr>
          <tr>
            <td class="_label">帮办员回复内容</td>
            <td class="_value" colspan="4">{{ dialogData.replyContent }}</td>
          </tr>
        </table>
      </div>
      <div class="pa-text-rt">
        <el-button type="primary" size="small" @click="handleClose"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import userProblem from "./components/userProblem.vue";
import dataPush from "./components/dataPush.vue";
import { getProDetailApi, getProjectHelpApi } from "@/api/manageApi.js";
import { listApi2 } from "@/api/workApi.js";
import ProjectCanvas from "@/views/manage/projectCanvas";
export default {
  components: {
    userProblem,
    dataPush,
    ProjectCanvas
  },
  data() {
    return {
      pushVisible: false,
      tabs: ["项目进度", "用户问题", "工作记录"],
      labels: [
        { label: "项目立项阶段", value: 1 },
        { label: "规划许可阶段", value: 2 },
        { label: "施工许可阶段", value: 3 },
        { label: "竣工验收阶段", value: 4 }
      ],
      currentIndex: 0,
      contentVisible: 0,
      proDetail: {},
      proId: "",
      stage: 1,
      isSlide: "",
      slide: "slide",
      problemList: [],
      eventList: [],
      tableData: [],
      dialogVisible: false,
      dialogData: {},
      queryParams: {
        withCodeStatus: 0, //0有码1无码
        projectId: "",
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  beforeRouteEnter: (to, from, next) => {
    to.meta.title = to.query.name;
    next();
  },
  mounted() {
    if (this.$route.query) {
      this.proId = this.$route.query.id;
    }
    
    this.getProjectHelp();
    if (this.stage == 1) {
      this.isSlide = "slideOne";
    } else if (this.stage == 2) {
      this.isSlide = "slideTwo";
    } else if (this.stage == 3) {
      this.isSlide = "slideThree";
    } else {
      this.isSlide = "slideFour";
    }
    this.queryParams.projectId = this.proId;
    this.getList();
    this.getProDetail();
  },
  methods: {
    async getList() {
      try {
        // this.loading = true;
        const res = await listApi2(this.queryParams);
        this.tableData = res.data.records;
        this.total = res.data.total;
        // this.loading = false;
      } catch (error) {
        // this.loading = false;
      }
    },
    async handleShow(row) {
      this.dialogData = row;
      // const res = await detailApi({ id: row.id })
      // this.dialogData = res.data
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleTab(index) {
      this.currentIndex = index;
      this.contentVisible = index;
    },
    toConfig() {
      this.$router.push({
        path: "/configuration/process",
        query: {
          id: this.proId,
          stage: this.stage,
          type: 2
        }
      });
    },
    consult() {
      this.$router.push({
        path: "/my/manage/consultReview",
        query: {
          projectId: this.proDetail.id,
          name: this.proDetail.projectName
        }
      });
    },
    seeMore() {
      this.$router.push({
        path: "/my/manage/proInfo",
        query: {
          projectId: this.proId,
          name: this.proDetail.projectName
        }
      });
    },
    // 项目详情
    getProDetail() {
      this.loading = true;
      getProDetailApi({
        id: this.proId
      }).then(res => {
        if (res.code == 0) {
          let type = [
            {
              label: "审批",
              lableId: "A00001"
            },
            {
              label: "核准",
              lableId: "A00002"
            },
            {
              label: "备案",
              lableId: "A00003"
            }
          ];
          let ptype = ["新建", "扩建", "迁建", "改建", "其他"];
          this.proDetail = res.data;
          type.forEach(n => {
            if (n.lableId === this.proDetail.projectType) {
              this.proDetail.projectTypeName = n.label;
            }
          });
          this.proDetail.projectNatureName =
            ptype[this.proDetail.projectNature];

          this.stage = res.data.stage;
          this.loading = false;
          // this.$route.meta.title = res.data.projectName
        }
      });
    },
    // 用户问题
    getProjectHelp() {
      getProjectHelpApi({
        projectId: this.proId,
        contentStatus: 0
      }).then(res => {
        if (res.code == 0) {
          this.problemList = res.data;
        }
      });

  },
  handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum;
      this.getList();
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize;
      this.getList();
    },

}
}
</script>
<style lang="scss" scoped>
.proDetail {
  .options {
    div {
      cursor: pointer;
    }
    .option-item {
      width: 263px;
      height: 45px;
      background: #408cff;
      border-radius: 10px;
      color: #fff;
      line-height: 45px;
      text-align: center;
      margin-right: 27px;
      .text {
        font-size: 23px;
        margin-right: 16px;
      }
    }
  }
  .bodyPart {
    margin-top: 22px;
    .proIntro {
      width: 265px;
      // height: 828px;
      background: #ffffff;
      box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
      border-radius: 24px;
      padding-top: 28px;
      padding-left: 24px;
      margin-right: 33px;
      position: relative;
      .title {
        font-size: 14px;
        color: #999;
        margin: 20px 0 16px 0;
        &:first-child {
          margin-top: 0;
        }
      }
      .content {
        color: #0a1629;
      }
      .moreContent {
        position: absolute;
        right: 15px;
        bottom: 16px;
        cursor: pointer;
        span {
          color: #3d78ff;
          margin-right: 6px;
        }
        .el-icon-arrow-right {
          color: #3d78ff;
        }
      }
    }
    .rightPart {
      flex: 1;
      .tab {
        width: 370px;
        height: 62px;
        background: #dfe9ff;
        border-radius: 31px;
        div {
          width: 164px;
          height: 46px;
          text-align: center;
          line-height: 46px;
          cursor: pointer;
        }
        .checked {
          background: #3d78ff;
          border-radius: 23px;
          color: #fff;
        }
      }
      .process {
        height: 749px;
        background-color: #fff;
        margin-top: 23px;
        padding: 33px 0 0 16px;
        .label {
          div {
            width: 155px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            padding: 0 20px;
          }
          .checked {
            background: #ebf1fe;
            font-weight: bold;
            color: #3d78ff;
          }
        }
        .slide {
          width: 4px;
          height: 39px;
          background: #3d78ff;
        }
        .slideOne {
          transform: translateY(0px);
        }
        .slideTwo {
          transform: translateY(40px);
        }
        .slideThree {
          transform: translateY(80px);
        }
        .slideFour {
          transform: translateY(120px);
        }
        .line {
          width: 3px;
          height: 258px;
          background: #e3e3e3;
        }
      }
      .userQues {
        margin-top: 21px;
        .service {
          height: 40px;
          text-align: center;
          line-height: 40px;
          background: #e6edf5;
          border-radius: 14px;
          margin-bottom: 34px;
        }
        .pagination {
          display: flex;
          justify-content: flex-end;
        }
        .finish {
          height: 40px;
          background: #d5ffe9;
          border-radius: 14px;
          text-align: center;
          line-height: 40px;
          color: #1da039;
          margin-top: 23px;
          margin-bottom: 34px;
        }
      }
    }
  }
}
table {
  width: 100%;
  border-collapse: collapse;
  td {
    font-size: 14px;
    padding: 15px;
    font-weight: 600;
  }
  ._label {
    width: 30%;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    background-color: #f6f6f6;
  }
  ._value {
    font-weight: normal;
    text-align: left;
  }
}
table,
th,
td {
  border: 1px solid #bed0d3;
}

:deep(.show) {
  color: #3f8cff;
  cursor: pointer;
}
</style>
